<template>
  <div class="bg-white rounded-xl overflow-hidden transition-all duration-300
              shadow-lg hover:shadow-xl transform hover:-translate-y-0.5
              border border-gray-100 hover:border-gray-200
              relative before:absolute before:inset-0 before:bg-gradient-to-br
              before:from-white before:to-gray-50">

    <!-- 增强版社区背景图 -->
    <div class="h-40 w-full relative overflow-hidden group">
      <img
        :src="community.backgroundImage"
        alt="社区背景"
        class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
      >
      <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black opacity-40"></div>
    </div>

    <!-- 卡片主体内容 -->
    <div class="p-6 -mt-8 relative bg-white rounded-t-2xl shadow-inner">
      <!-- 头像和基本信息 -->
      <div class="flex items-end space-x-4 mb-6">
        <!-- 增强版社区头像 -->
        <div
          class="w-20 h-20 rounded-full overflow-hidden  border-white shadow-xl transform transition-transform duration-300 hover:scale-105">
          <img
            :src="community.avatar"
            alt="社区头像"
            class="w-full h-full object-cover"
          >
        </div>

        <!-- 社区等级徽章 -->
        <div
          class="absolute top-4 right-4 bg-green-400 text-white px-3 py-1 rounded-full text-sm font-bold shadow-lg flex items-center cursor-pointer"
          @mouseenter="showLevelTooltip = true"
          @mouseleave="showLevelTooltip = false"
        >
          <i class="fas fa-medal mr-1"></i>
          Lv.{{ community.level }}

          <!-- 经验提示框 -->
          <div
            v-if="showLevelTooltip"
            class="absolute top-full left-1/2 transform -translate-x-1/2 mt-1 z-10 bg-white text-gray-800 p-3 rounded-xl shadow-lg text-sm border border-gray-100 transition-all duration-200 ease-in-out"
          >
            <!-- 添加箭头指示器 -->
            <div class="absolute -top-2 left-1/2 transform -translate-x-1/2 w-4 h-4 bg-white rotate-45 border-t border-l border-gray-100"></div>

            <div class="flex items-center mb-1">
              <i class=" text-yellow-400 mr-2 text-xs">现</i>
              <span>{{ community.experience }}</span>
            </div>
            <div class="flex items-center">
              <i class=" text-purple-500 mr-2 text-xs">升</i>
              <span>{{ community.experienceMax }}</span>
            </div>
          </div>
        </div>

        <!-- 社区名称和学校 -->
        <div class="flex-1 min-w-0">
          <h2 class="text-2xl font-extrabold text-gray-900 truncate">{{ community.name }}</h2>
          <p class="text-sm text-gray-600 flex items-center mt-1">
            <i class="fas fa-university mr-1 text-green-500"></i>
            {{ community.school }}
          </p>
        </div>
      </div>

      <!-- 核心统计信息 -->
      <div class="grid grid-cols-2 gap-4 mb-6">
        <div class="bg-green-50 p-4 rounded-xl border border-green-100 hover:shadow-md transition-shadow">
          <div class="text-xl font-bold text-green-600">{{ community.members }}</div>
          <div class="text-xs text-green-500 flex items-center">
            <i class="fas fa-users mr-1"></i>社区成员
          </div>
        </div>

        <div 
          class="bg-blue-50 p-4 rounded-xl border border-blue-100 hover:shadow-md transition-shadow relative"
          @mouseenter="showPostsTooltip = true"
          @mouseleave="showPostsTooltip = false"
        >
          <div class="text-xl font-bold text-blue-600">{{ community.postsCount }}</div>
          <div class="text-xs text-blue-500 flex items-center">
            <i class="fas fa-feather-alt mr-1"></i>帖子数量
          </div>

          <!-- 优化后的帖子数据提示框 -->
          <div
            v-if="showPostsTooltip"
            class="absolute top-full left-1/2 transform -translate-x-1/2 mt-2 z-10 bg-white text-gray-800 p-3 rounded-xl shadow-lg text-sm border border-gray-100 transition-all duration-200 ease-in-out"
          >
            <!-- 添加箭头指示器 -->
            <div class="absolute -top-2 left-1/2 transform -translate-x-1/2 w-4 h-4 bg-white rotate-45 border-t border-l border-gray-100"></div>
            <div class="flex items-center mb-1">
              <i class="fas fa-comment text-blue-400 mr-2"></i>
              <span>{{ community.comments }}</span>
            </div>
            <div class="flex items-center">
              <i class="fas fa-heart text-red-400 mr-2"></i>
              <span>{{ community.likes }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 活跃度仪表盘 -->
      <div class="mb-6">
        <div class="flex justify-between items-center mb-2">
          <span class="text-sm font-medium text-gray-700">社区活跃度</span>
          <span class="text-sm font-bold text-green-500">{{ community.heatLevel }}%</span>
        </div>
        <div class="h-3 w-full bg-gray-100 rounded-full overflow-hidden">
          <div
            class="h-full bg-gradient-to-r from-green-400 to-emerald-500 transition-all duration-1000 ease-out"
            :style="{ width: community.heatLevel + '%' }"
          ></div>
        </div>
      </div>

      <!-- 社区特色标签 -->
      <div class="mb-6">
        <div class="flex flex-wrap gap-2">
          <span v-for="tag in community.tags" :key="tag"
                class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
            {{ tag }}
          </span>
        </div>
      </div>

      <!-- 社区简介 -->
      <div class="mb-6">
        <h3 class="text-sm font-medium text-gray-700 mb-2">社区简介</h3>
        <p class="text-sm text-gray-600 line-clamp-3">{{ community.description }}</p>
      </div>

      <!-- 增强版加入按钮 -->
      <button
        class="w-full py-3 rounded-xl transition-all duration-300 transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50"
        :class="{
          'bg-gradient-to-r from-green-500 to-emerald-600 text-white hover:shadow-lg active:translate-y-0': !isJoined,
          'bg-gray-200 text-gray-500 cursor-not-allowed': isJoined
        }"
        @click="toggleJoin"
        :disabled="isJoined"
      >
        <span class="flex items-center justify-center">
          <i v-if="isJoined" class="fas fa-check-circle mr-2"></i>
          <i v-else class="fas fa-plus-circle mr-2"></i>
          {{ isJoined ? "已加入社区" : "立即加入" }}
        </span>
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: "CommunityInfo",
  props: {
    communityId: {
      type: [Number, String],
      required: true
    }
  },
  data() {
    return {
      isJoined: false,
      showLevelTooltip: false,
      showPostsTooltip: false,
      community: {
        id: 0,
        name: "加载中...",
        school: "",
        avatar: "",
        backgroundImage: "",
        description: "加载中...",
        members: 0,
        postsCount: 0,
        likes: 0,
        comments: 0,
        level: 0,
        heatLevel: 0,
        createdAt: 0,
        experience: 0,
        experienceMax: 0,
        // 新增社区特色标签
        tags: ["1", "2", "3"]
      }
    };
  },
  methods: {
    // 切换加入/退出社区状态
    toggleJoin() {
      this.isJoined = !this.isJoined;
      // 实际应用中应该调用API来加入/退出社区
      if (this.isJoined) {
        this.$emit("join", this.communityId);
      } else {
        this.$emit("leave", this.communityId);
      }
    },

    // 加载社区信息
    loadCommunityInfo() {
      // 模拟API调用，实际应用中应该从后端获取数据
      // 这里使用setTimeout模拟异步请求
      setTimeout(() => {
        // 模拟数据
        this.community = {
          id: this.communityId,
          name: "计算机科学爱好者协会",
          school: "示范大学",
          avatar: "https://ts1.tc.mm.bing.net/th/id/R-C.8bcbcfb561b6105fd80cd04d6d0e2572?rik=Btid8FqZk%2bT9pA&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50061%2f7369.jpg_wh1200.jpg&ehk=0cq1iaotDrbGT579BZiNhZ1dFQqxL6OX12ZoN8p%2bXBs%3d&risl=&pid=ImgRaw&r=0",
          backgroundImage: "https://ts1.tc.mm.bing.net/th/id/R-C.8bcbcfb561b6105fd80cd04d6d0e2572?rik=Btid8FqZk%2bT9pA&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50061%2f7369.jpg_wh1200.jpg&ehk=0cq1iaotDrbGT579BZiNhZ1dFQqxL6OX12ZoN8p%2bXBs%3d&risl=&pid=ImgRaw&r=0",
          description: "这是一个致力于计算机科学研究和学习的社区。我们定期组织技术分享、编程竞赛和项目实践活动，欢迎所有对计算机科学感兴趣的同学加入！",
          members: 23,
          postsCount: 328,
          likes: 5321,
          comments: 2843,
          level: 4,
          heatLevel: 85,
          // 模拟创建日期为90天前
          createdAt: new Date(Date.now() - 90 * 24 * 60 * 60 * 1000).toISOString(),
          // 新增社区特色标签
          tags: ["技术交流", "学习分享", "项目合作"],
          experience: 17669,
          experienceMax: 200000
        };
      }, 500);
    }
  },
  created() {
    this.loadCommunityInfo();
  },
  watch: {
    // 监听communityId变化，重新加载社区信息
    communityId() {
      this.loadCommunityInfo();
    }
  }
};
</script>
